<template>
  <ul class="menu-sub">
    <div class="menu-sub-title" @click="hendleClick">
        <span class="titleIcon" :style="{ transform:`rotateZ(${showChild ? 0 : 180}deg)`}">^</span>
      <slot name="title"></slot>
    </div>
    <div v-show="showChild" class="child-box" >
    <slot></slot>
    </div>
  </ul>
</template>

<script>
export default {
  name: "menuSub",
  props: {},
  data() {
    return {
        showChild: !true
    };
  },
  computed: {

  },
  created() {},
  mounted() {

  },
  watch: {},
  methods: {
      hendleClick(){
         this.showChild = !this.showChild;
      }
  },
  components: {}
};
</script>

<style lang='less'>
.menu-sub {
  list-style: none;
.child-box {
    padding-left: 30px;
}
  &-title {
    background-color: #888;
    font-size: 40px;
    position: relative;
    .titleIcon{
        position: absolute;
        left: 110px;
        top: 15px;
    }
  }
}
</style>
